<template>
  <div class="app-container">
    <el-row class="nav-head">
      <el-col :xs="12" :sm="12" :lg="5">
        <div class="head-img">
          <img src="../../assets/images/proico_03.png" alt="">
          <span>陈先磊</span>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="19" >
        <div class="content-top">
          <p>上海市静安区仙谷社区</p>
          <p>最近测量时间：2018-01-23</p>
          <p>最近测量设备：双佳一体机</p>
        </div>
      </el-col>
    </el-row>
    <div class="title">
      <h3>我的简报</h3>
    </div>
    <el-row class="briefing">
      <el-col :xs="24" :sm="24" :lg="12" class="left-list">
        <div class="briefing-list">
          <ul>
            <li>
              <span><i class="iconfont mintui-if-icontw"></i>体温（次/分钟） </span>
              <span><i>37.2</i><i></i> </span>
            </li>
            <li>
              <span><i class="iconfont mintui-if-jiankangshenminxietangfuwu"></i>血压（mmhg） </span>
              <span><i>64/104</i><i></i> </span>
            </li>
            <li>
              <span><i class="iconfont mintui-if-xieyang1"></i>血氧（百分比） </span>
              <span><i>80%</i><i></i> </span>
            </li>
            <li>
              <span><i class="iconfont mintui-if-tizhong"></i>体重（kg </span>
              <span><i>65</i><i></i> </span>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="briefing-list">
          <ul>
            <li>
              <span><i class="iconfont mintui-if-shengao"></i>身高（cm）</span>
              <span><i>180</i><i></i> </span>
            </li>
            <li>
              <span><i class="iconfont mintui-if-tizhizhishu"></i>体质指数BMI（指数50-120）</span>
              <span><i>65</i><i></i></span>
              <div class="tz" :style="{color: colors('正常')}">正常</div>
            </li>
            <li>
              <span><i class="iconfont mintui-if-xinshuai"></i>心率（次/分钟）</span>
              <span><i>85</i><i></i> </span>
            </li>
            <li>
              <span><i class="iconfont mintui-if-celiang"></i>体脂测量（体脂肪率/基础代谢）</span>
              <span><i>64/104</i><i></i> </span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <div class="title">
      <h3>体验报告</h3>
      <a href="#">更多></a>
    </div>
    <div class="timeline-box">
      <li v-for="(item,index) in datalist" :key="index">
        <div class="content">
          <span class="title-2">{{item.time}}</span>
          <div class="body-list">
            <p>档案号：{{item.fileNumber}}</p>
            <p>描 述：{{item.description}}</p>
            <div class="xianxi">
              <a href="">阅读详细体检报告 ></a>
            </div>
          </div>
        </div>
      </li>
    </div>
    <div>
    </div>
  </div>
</template>

<script>
  const colorall = {
    正常: '#1cc09f',
    过轻: '#209ae0',
    过重: '#e0b520',
    肥胖: '#e07620',
    非常肥胖: '#e04020'
  }
  export default {
    data() {
      return {
        name: '',
        all: colorall,
        datalist: [{
          id: 5,
          time: '2018-01-13   12:21——21:22',
          fileNumber: '00503',
          description: '8号测量的体检报告'
        },
        {
          id: 4,
          time: '2018-01-23   12:21——21:22',
          fileNumber: '00603',
          description: '4号测量的体检报告'
        },
        {
          id: 3,
          time: '2018-03-13   12:21——21:22',
          fileNumber: '00501',
          description: '3号测量的体检报告'
        },
        {
          id: 2,
          time: '2018-02-13   12:21——21:22',
          fileNumber: '00533',
          description: '8号测量的体检报告'
        },
        {
          id: 1,
          time: '2018-06-13   12:21——21:22',
          fileNumber: '00303',
          description: '7号测量的体检报告'
        }
        ]
      }
    },
    methods: {
      colors(str) {
        return colorall[str]
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: #d2d8dc;
  $ico: #5d7681;
 .iconfont{
   color: $ico;
   font-size: 20px;
   padding-right: 10px;
 }
  .app-container {
    background-color: #f3f3f3;
    .nav-head {
      height: 120px;
      width: 100%;
      background: #fff;
      border-top-left-radius: 60px;
      border-bottom-left-radius: 60px;
      .head-img {
        width: 180px;
        height: 120px;
        float: left;
        background-color: $bg;
        border-top-left-radius: 60px;
        border-bottom-left-radius: 60px;
        text-align: center;
        img {
          width: 74px;
          height: 86px;
          position: relative;
          top: 50%;
          left: 50px;
          margin-top: -52px;
          margin-left: -37px;
        }
        span {
          position: relative;
          left: -15px;
          top: 60%;
        }
      }
      .content-top {
        p:nth-child(1) {
          color: #333;
          font-size: 18px;
          font-weight: bold;
        }
        p {
          color: #666;
          font-size: 16px;
        }
      }
    }
    .title {
      margin-top: 20px;
      height: 30px;
      line-height: 30px;
      h3 {
        font-size: 17px;
        margin: 0;
        float: left;
        color: #333;
        font-weight: normal;
      }
      a {
        float: left;
        padding-left: 30px;
        padding-top: 3px;
        font-size: 14px;
        color: #1cc09f;
      }
    }
    .briefing {
      background: #fff;
      width: 99%;
      overflow: hidden;
      margin-top: 10px;
      .left-list {
        border-right: 1px dotted #ddd;
      }
      .briefing-list {
        li {
          list-style: none;
          display: block;
          height: 60px;
          line-height: 55px;
          .tz {
            position: relative;
            right: -30px;
            top: 0;
          }
          span:nth-child(1) {
            float: left;
            font-size: 18px;
            color: #333; //
            p{
              margin:0;
              width: 33px;
              float: left;
              margin-right: 5px;
              margin-top: 1px;
            }
            img {
              width: 65%;
              // height: 100%;
            }
          }
          span:nth-child(2) {
            float: right;
            margin-right: 30px;
            padding-right: 20px;
            i {
              font-style: normal;
              float: left;
            }
            i:nth-child(2) {
              float: left;
              position: relative;
              padding-left: 30px;
              top: 25px;
              &::before {
                transform: rotate(-45deg) translateY(-4px);
                transform-origin: 0 0;
                content: '';
                display: inline-block;
                position: absolute;
                height: 15px;
                width: 1px;
                background: #c0c4cc;
              }
              &::after {
                transform: rotate(45deg) translateY(4px);
                transform-origin: 100% 100%;
                content: '';
                display: inline-block;
                position: absolute;
                height: 15px;
                width: 1px;
                background: #c0c4cc;
              }
            }
          }
        }
      }
    }
    .timeline-box {
      position: relative;
      padding: 10px 0;
      margin: 10px 0;
      li {
        list-style: none;
      }
      a {
        color: #333;
        text-decoration: none;
      }
      p {
        line-height: 22px;
      }
      h1 {
        margin: 2em 0;
        color: #333;
        text-align: center;
        font-size: 1.2em;
      }
      &:before {
        -webkit-animation: move-to-down 1.4s;
        content: '';
        position: absolute;
        top: 0;
        left: 18px;
        width: 1px;
        height: 100%;
        background-color: #5d7782;
      }
      li {
        &:before {
          -webkit-animation: move-to-right 1.2s;
          content: '';
          width: 20px;
          height: 20px;
          line-height: 20px;
          color: #fff;
          text-align: center;
          background-color: #f3f3f3;
          border: 2px solid #5d7782;
          border-radius: 50%;
          position: absolute;
          left: 8px;
        }
        &:nth-child(even):before {
          background-color: #f3f3f3;
        }
        margin: 2em 0 0em 2em;
      }
    }
    .content {
      -webkit-animation: move-to-left 1.2s;
      position: relative;
      color: #999;
      .body-list {
        background-color: #fff;
        margin-top: 0.8em;
        box-shadow: 4px 6px 10px #ddd;
        -webkit-box-shadow: 4px 6px 10px #ddd;
        p {
          display: block;
          font-size: 16px;
          padding: 10px;
          color: #333;
          margin: 0;
        }
        .xianxi{
          float: right;
          position: relative;
          font-size: 16px;
          right: 20px;
          top:-50px;
          p{
            color: #333;
          }
        }
      }
      .title-2 {
        font-size: 18px;
        color: #5d7782;
        line-height: 22px;
      }
    }
  }
</style>

